Size Change: -2.01 kB (0%)

Total Size: 1.19 MB

_{compressed-size-action}

This is what I see:

This is a good feature! It can benefit the navigation menu and buttons blocks also.

It definitely needs a different design :D — ideally something that looks like social links. I'll help you with that. But in principle this seems to work well for me.

I've had a moment to reflect on this PR, and I think we have to zoom out for a bit.

Right now, when we refer to "Placeholders" in block editor parlance, we think mostly of this:

It's a big white box with text and buttons inside, always 200px tall. But in most cases, this placeholder looks nothing like the end result. The navigation menu is an excellent example of this — if you squint, there's no way to distinguish a nav menu placeholder from an image placeholder, even though they're vastly different. More importantly, the navigation placeholder looks nothing like its own end result.

That's the driving force behind this good rethink by @shaunandrews in #23207 (comment):

Instead of using a big box, it provides some handy links to quickly complete the setup state for the block, while at the same time looking just a little bit like the end result. We might be able to get even closer, but this is a good step in the right direction.

All of the above was also the driving force behind preinserting a number of icons when you insert it the first time. And in addition to that, to give a feeling of what the end result might look like.

Putting that all together — squint and it looks right, keep it simple, don't be a giant white box — perhaps we could do with something as simple as this?

Those colored dots look like the classic social link blobs, but blurred out to indicate they aren't set up. As son as you add a single button, they disappear.

Speaking of, the "add" menu looks like this:

I do love how it shows 6 icons and has a search feature. But we need to update the search icon to be this one:

and is there any way we can customize the defaults showing up there? I think there's some frecency going on here, but amazon and behance really don't deserve to be at the top, they are just riding on alphabetization here.

By the way, if you dig the above, I can push the code to make the setup state look like the mockup.

@jasmussen I do like the above 👍

As far as the inserter and the icon, it is still using the common InnerBlocks inserter, so it will require further modifications to allow customizing the icon and other aspects (sort order). We can push those forward in other PRs if think it it is the right approach.

Let's feel it, and if the blur doesn't work I'll try one where I recreate 4 dummy icons and make them semi transparent.

@jasmussen I just pushed up a change using blurred placeholder. Take a look and let me know if that is what you are thinking. Here's it in action:

I have a very strong (negative) reaction to the blurred blobs, but its likely just personal preference.

That said, I also have a concern that the blur would look really strange on some site designs with image/color backgrounds; Its also not very representative of the actual output of the rendered block.

@shaunandrews Thanks for the thoughts, I'm fine with altering the blur if it doesn't work.

As far as design, this would only ever show in the editor, are you still thinking of design conflicts in that context?

As far as end result, comparing it to other placeholders like image, shortcodes, etc... none of those look like the end published result when they have not been filled with content. The goal with the Social Link placeholder is just to fill the space with something, so it's not just the [+] inserter in that space when no icons have been picked. The current solution uses actual icons that requires removing and confuses people, so trying for something.

Do you think none blurred circles of color/gray would work better?

Yep, from the blur in #25941 (comment) I thought it was worth trying, because I had this idea that blur might be a way to make skeleton indicators more "real", and potentially use it for placeholders also:

But it isn't working here as I had hoped. I'll push some tweaks to this.

...are you still thinking of design conflicts in that context?

Yes, specifically in the context of the site editor as well as within patterns with background colors or images.

I bet just the plain circle shapes (not blurred) would work just as well, and be more representative of the intended result.

I bet just the plain circle shapes (not blurred) would work just as well, and be more representative of the intended result.

Yep, that's the alternative I was going for, possibly semi transparent. I'll also use fb/twitter/insta colors.

I pushed some polish. Here's how it looks now:

I think this is worth trying! What do you think?

This works well for me, definitely an improvement to the overall placeholder experience.
@shaunandrews thoughts?

I like it better than the blurring. It's a little strange that clicking on the empty shapes doesn't do anything, but I realize that starts to creep back towards the current behavior.

--

The empty shapes only makes sense if the block is using the pill or circle style; If you set the default to "Logos Only" this'll break:

(The placeholder shapes don't change when I choose the "Pill Shape" style, but I figured that's just an implementation detail that hasn't been sorted yet.)

--

Perhaps unrelated to this PR, the focus shapes are really strange and clicking on the "Browse All" button at the bottom of the inserter unselects the block.

Solid feedback as usual. I tweaked the setup state based on variations. Default:

Icon only:

Pills:

@jasmussen Works well 👍

👍